<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>统计事务各个系统所占百分比（饼图）</title>
	<%@include file="/common/commonCSS.jsp" %>
	<%@include file="/common/commonJS.jsp" %>
	<%@include file="/WEB-INF/jsp/include/taglib.jsp" %>


	</head>
<body>
<div class="main-container" id="main-container">

	<div class="row" style="margin-top: 20px;">
		<div class="row" style="margin-top: 20px;">
			<div class="col-md-12">
				<form class="layui-form" id="search-from" action="${webRoot}/report/affreport/AffTypePie">
					<div class="layui-form-item">
						<label class="layui-form-label" style="width:6%;">名称:</label>
						<div class="layui-input-inline">
							<input type="text" name="name" value="${params.name}"  placeholder="请输入名称"  class="layui-input" >
						</div>
						<button class="layui-btn" id="searchSubmit"><i class="layui-icon">&#xe615;</i>搜 索</button>
						<button class="layui-btn layui-btn-warm" type="button" id="refresh">重 置</button>
						<%--<a class="layui-btn" href="${webRoot}/sla/slaalerttemp/info"><i class="layui-icon">&#xe61f;</i> 新 增</a>--%>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div id="container" style="min-width:400px;height:400px"></div>
</div>
<script type="text/javascript">


    var result = ${data};
    var categories = new Array();
    var opts = new Array();
    var params = {sqlId:'ProbClosePie',param:{}};
    $.each(result, function(i,item) {
        var temp = new Array();
        temp.push(item.name);
        temp.push(item.ticket_mount);
        categories.push(temp);
        var tmpParam = {};
//                		tmpParam.sqlId = "IncGridQuery";
        tmpParam.close_code = item.value,
//                		tmpParam.incStatus = 60;
            opts[i] = tmpParam;
    });
    var series = new Array();
    var seriesd = { type: "pie",name:"分类统计",data:categories,opts:opts};
    series.push(seriesd);
    var clickFunction = function(e){
        var series = e.point.series;
        var tmpParam = series.options.opts[e.point.index];
        top.window.getListIncident(tmpParam);
    };
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        //colors: ["#7cb5ec",
        //	   "#90ed7d",
        //	   "#ffca28",
        //	   "#8085e9",
        //	   "#f15c80",
        //	   "#e4d354",
        //	   "#2b908f",
        //	   "#f45b5b",
        //	   "#91e8e1",
        //	   "#9e9d24"],
        colors: ['#7cb5ec', '#f7a35c', '#90ee7e', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
        credits: {enabled:false},
        title: {text: '统计事务各个系统所占百分比（饼图）'},
        lang : {noData : '暂无数据显示'},
        tooltip: {
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
                    Highcharts.numberFormat(this.y, 0, ',') +' 次)';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
                            Highcharts.numberFormat(this.y, 0, ',') +' 次)';
                    }
                },
                events:{click:clickFunction}
            }

        },
        series: series
    });






</script>
</body>

</html>